import React from 'react'
import { View, Text,Image,Dimensions ,Platform,Button,TextInput,StyleSheet,} from 'react-native'
export default function MallTop() {
    //获取屏幕宽度
    const width = Dimensions.get('window').width;
    //获取屏幕头部导航栏高度，安卓和ios不同
    //android 24px
    //ios 44px
    const topheight = Platform.OS === 'ios' ? 44 : 24;  //获取头部导航栏高度

    const styles = StyleSheet.create({
        //头部容器
        top:{
            display:'flex',
            flexDirection:'row',
            justifyContent:'space-between',
            // padding:10,
            alignItems:'center',
            height:50+topheight,
            backgroundColor:'#fff',
            paddingLeft:10,
            paddingRight:10,
        },
        //头部内容
        topicon:{
            display:'flex',
            flexDirection:'column',
            alignItems:"center"
        },
        //头部内容文本
        topiconText:{
            fontSize:12,
            color:'#000'
        },
        //头部内容左右图片
        imgs:{width:20,height:20},
        //头部搜索框
        topinput:{
            height:30,
            borderRadius:50,
            width:'75%',
            fontSize:12,
            color:'#ccc',
            paddingLeft:10,
            backgroundColor:'#F8F8F8',
            //边框
            borderWidth:1,
            borderColor:'#ccc'

        }
    })
  return (
    <View>
         <View style={styles.top}>
               <View  style={styles.topicon}>
               <Image style={styles.imgs} source={require('../../assets/images/more.png')}></Image>
               <Text style={styles.topiconText}>更多</Text>
               </View>
                 <TextInput placeholder='搜索' style={styles.topinput} />
               <View style={styles.topicon}>
               <Image style={styles.imgs} source={require('../../assets/images/fl.png')}></Image>
               <Text style={styles.topiconText}>分类</Text>
               </View>
            </View>
    </View>
  )
}